<template>
    <div>
        <el-dialog v-model="showDialog" @close="handleClose()" :width="500">
            <div class="text-center text-tx-primary">
                <div class="text-4xl font-medium">移动端演示</div>
                <div class="flex justify-around">
                    <div>
                        <canvas ref="qrCanvas"></canvas>
                        <div class="mt-2.5">请扫码进入</div>
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script lang="ts" setup>
import QRCode from 'qrcode';

const props = defineProps({
	url: {
		type: String,
		default: '',
	},
});

const showDialog = ref(true)
const emit = defineEmits(['close']);

const qrCanvas = ref(null);

onMounted(() => {
    nextTick(() => {
        QRCode.toCanvas(qrCanvas.value, props.url, { width: 150 });
    })
});

const handleClose = () => {
    showDialog.value = false;
    emit('close');
};

</script>

<style lang="scss" scoped></style>
